<template>
  <div class="container">
    <div class="main">
      <!-- 整个注册盒子 -->
      <div class="loginbox">
        <!-- 左侧的注册盒子 -->
        <div class="loginbox-in">
          <div class="userbox">
            <span class="iconfont">&#xe817;</span>
            <input class="user" id="user" v-model="name" placeholder="用户名" />
          </div>
          <br />
          <div class="emilebox">
            <span class="iconfont">&#xe817;</span>
            <input
              class="emile"
              id="emile"
              v-model="email"
              placeholder="邮箱"
            />
          </div>
          <br />
          <div class="pwdbox">
            <span class="iconfont">&#xe775;</span>
            <input
              class="pwd"
              id="password"
              v-model="pwd"
              type="password"
              placeholder="密码"
            />
          </div>
          <br />
          <div class="pwdbox">
            <span class="iconfont">&#xe775;</span>
            <input
              class="pwd"
              id="re_password"
              v-model="repwd"
              type="password"
              placeholder="确认密码"
            />
          </div>

          <br />
          <button type="primary" class="register_btn" @click="register">
            注册
          </button>
        </div>

        <!-- 右侧的注册盒子 -->
        <div class="background">
          <div>
            <h5 class="bt">注&nbsp;册</h5>
          </div>
          <div class="title">欢迎注册网盘管理系统</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Notification 组件的占位符，你可以根据库或组件的文档来放置它 -->
  <Notification
    :message="notificationMessage"
    :type="notificationType"
    v-if="showNotification"
  />
</template>

<script>
import axios from "axios";
import Notification from "@/components/NotificationComponent.vue";
export default {
  name: "RegisterView",
  components: {
    Notification,
  },

  data: function () {
    return {
      name: "",
      email: "",
      pwd: "",
      repwd: "",
      notificationMessage: "",
      notificationType: "",
      showNotification: false,
      isFadingOut: false,
    };
  },
  methods: {
    async register() {
      // 前端验证
      if (!this.validateForm()) {
        // 如果验证失败，不发送请求
        return;
      }
      try {
        // eslint-disable-next-line no-unused-vars
        const response = await axios.post("/api/register", {
          name: this.name,
          email: this.email,
          password: this.pwd,
        });
        // 如果注册成功，处理响应数据...
        this.notificationMessage = "注册成功";
        this.notificationType = "success";
        this.showNotification = true;
        // 等待一段时间后隐藏通知（如果需要）
        setTimeout(() => {
          this.showNotification = false;
          // 注册成功后跳转到登录页
          this.$router.push("/login");
          // 重置表单和报错信息（如果需要）
          this.name = "";
          this.email = "";
          this.pwd = "";
          this.repwd = "";
          this.error = null;
        }, 2000); // 2秒后隐藏通知
      } catch (error) {
        // 捕获并处理错误，比如显示报错信息
        console.error("注册失败:", error);
        if (
          error.response &&
          error.response.data &&
          error.response.data.errors
        ) {
          // 假设后端返回了具体的验证错误信息
          this.notificationMessage =
            "登录失败: " + JSON.stringify(error.response.data.errors);
        } else {
          this.notificationMessage = "登录时发生错误";
        }
        this.notificationType = "error";
        this.showNotification = true;

        // 4s自动关闭
        setTimeout(() => {
          this.isFadingOut = true; // 开始淡出
          setTimeout(() => {
            this.handleNotificationClose(); // 淡出后关闭通知
          }, 500); // 淡出动效持续时间（这里假设为0.5秒）
        }, 4000);
      }
    },
    handleNotificationClose() {
      this.showNotification = false;
    },

    validateForm() {
      // 用户名验证（这里只做了非空验证，你可以根据需要添加更多规则）
      if (!this.name || this.name.trim() === "") {
        alert("用户名不能为空");
        return false;
      }

      // 邮箱验证（这里使用了一个简单的正则表达式，你可以使用更严格的验证库）
      const emailRegex = /^\S+@\S+\.\S+$/;
      if (!emailRegex.test(this.email)) {
        alert("请输入有效的邮箱地址");
        return false;
      }

      // 密码验证（这里只做了非空验证，你可以添加长度、特殊字符等规则）
      if (!this.pwd || this.pwd.trim() === "") {
        alert("密码不能为空");
        return false;
      }

      // 确认密码验证（确保与密码一致）
      if (this.pwd !== this.repwd) {
        alert("两次输入的密码不一致，请重新输入");
        return false;
      }

      // 所有验证都通过了
      return true;
    },
  },
};
</script>

<style scoped>
.loginbox {
  display: flex;
  position: absolute;
  width: 800px;
  height: 400px;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 #4e655d;
}
.loginbox-in {
  background-color: #89ab9e;
  width: 240px;
}
.userbox {
  margin-top: 90px;
  height: 30px;
  width: 230px;
  display: flex;
  margin-left: 25px;
}
.emilebox {
  height: 30px;
  width: 225px;
  display: flex;
  margin-left: 25px;
}
.pwdbox {
  height: 30px;
  width: 225px;
  display: flex;
  margin-left: 25px;
}

.background {
  width: 570px;
  background-image: url("@/assets/img/login_register/bj.png");
  background-size: cover;
  font-family: sans-serif;
}
.bt {
  padding-top: 15px;
  padding-left: 15px;
  font-size: 20px;
  color: #4e655d;
  width: 80px;
}
.title {
  margin-top: 280px;
  font-weight: bold;
  letter-spacing: 4px;
  font-size: 21px;
  color: #4e655d;
}

.title:hover {
  font-size: 25px;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.uesr-text {
  position: left;
}
input {
  outline-style: none;
  border: 0;
  border-bottom: 1px solid #e9e9e9;
  background-color: transparent;
  height: 20px;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}
input::-webkit-input-placeholder {
  font-size: 16px;
  color: #e9e9e9;
}
input:focus {
  border-bottom: 2px solid #445b53;
  background-color: transparent;
  transition: all 0.2s ease-in;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}
input:hover {
  border-bottom: 2px solid #445b53;
  background-color: transparent;
  transition: all 0.2s ease-in;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #89ab9e inset !important;
  -webkit-text-fill-color: #ffffff;
}

input:-webkit-autofill::first-line {
  font-size: 15px;
  font-weight: bold;
}
.log-box {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  width: 174px;
  margin-left: 30px;
  color: #4e655d;
  margin-top: -5px;
  align-items: center;
}
.log-box-text {
  color: #4e655d;
  font-size: 12px;
  text-decoration: underline;
}
.register_btn {
  background-color: #5f8276; /* Green */
  border: none;
  color: #fafafa;
  padding: 7px 35px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  border-radius: 20px;
  outline: none;
}
.register_btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  background-color: #0b5137;
  transition: all 0.2s ease-in;
}

.warn {
  margin-top: 60px;
  margin-right: 110px;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 17px;
}

.register_btn:hover {
  font-weight: bold;
  cursor: pointer;
}
@font-face {
  font-family: "iconfont";
  src: url("~@/assets/font/login_register/iconfont.eot");
  src: url("~@/assets/font/login_register/iconfont.eot?#iefix")
      format("embedded-opentype"),
    /* IE6-IE8 */ url("~@/assets/font/login_register/iconfont.woff2")
      format("woff2"),
    url("~@/assets/font/login_register/iconfont.woff") format("woff"),
    url("~@/assets/font/login_register/iconfont.ttf") format("truetype"),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
      url("~@/assets/font/login_register/iconfont.svg#iconfont") format("svg");
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  height: 22px;
  color: #4e655d;
  margin-right: 10px;
  margin-top: 3px;
}

.icon-key:before {
  content: "\e775";
}

.icon-account:before {
  content: "\e817";
}
</style>
